<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Sphere</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Parameters ---
    const cx = 250;
    const cy = 200;
    const R = 150;
    // Visually represent r such that P is between O and B. Let's set r to be about 2/3 of R for visual clarity.
    const r_dist = R * 0.6; 

    // --- Coordinates ---
    // Center point O
    const ox = cx;
    const oy = cy;

    // Point P
    const px = cx - r_dist;
    const py = cy;

    // Points A and B on diameter
    const ax = cx + R;
    const ay = cy;
    const bx = cx - R;
    const by = cy;

    // --- Drawing Functions ---

    // Function to draw an arrowhead at the end of a line
    function drawArrowhead(ctx, fromX, fromY, toX, toY, headLength) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.save();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
        ctx.restore();
    }

    // --- Draw Diagram Components ---

    // 1. Draw the main circle (sphere)
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the dashed diameter AOB
    ctx.beginPath();
    ctx.setLineDash([6, 6]);
    ctx.moveTo(bx, by);
    ctx.lineTo(ax, ay);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // 3. Draw points O and P
    ctx.beginPath();
    ctx.arc(ox, oy, 3, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(px, py, 3, 0, 2 * Math.PI);
    ctx.fill();

    // 4. Draw the radius line R
    const angleR = -Math.PI / 4.5; // Angle for the radius line
    const endRx = cx + R * Math.cos(angleR);
    const endRy = cy + R * Math.sin(angleR);
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(endRx, endRy);
    ctx.stroke();
    
    // 5. Draw arrowhead for radius R
    drawArrowhead(ctx, cx, cy, endRx, endRy, 15);

    // --- Draw Labels ---
    
    // Set font for variables (italic)
    ctx.font = 'italic 24px "Times New Roman"';
    
    // Label for points A, B, O, P
    ctx.fillText('A', ax + 20, ay);
    ctx.fillText('B', bx - 20, by);
    ctx.fillText('P', px, py - 20);
    ctx.fillText('O', ox + 12, oy + 15);

    // Label for radius R
    const R_label_x = cx + (R / 1.8) * Math.cos(angleR);
    const R_label_y = cy + (R / 1.8) * Math.sin(angleR);
    ctx.fillText('R', R_label_x, R_label_y);

    // Label for distance r
    ctx.fillText('r', (px + ox) / 2 - 10, py + 20);
    
    // Label for refractive index n
    ctx.fillText('n', cx, cy + R - 40);
    
    // Set font for the figure caption (Chinese font)
    ctx.font = '22px "SimSun", "Songti SC"'; 
    ctx.fillText('图 1', cx, cy + R + 40);

</script>
</body>
</html>